<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    height: 1000px;
    background-color: #CCC;
  }

  .img {
    width: 50px;
    height: 50px;
  }
</style>

<body>
  <div class="box">

  </div>
  <img class="img imgLoad" data-src="https://imgcdn.sto.cn/7A3F82E9-FBFB-43-40x42-image.png" alt="" loading="lazy">
 
</body>
<script>

  document.addEventListener('DOMContentLoaded', () => {
    const lazyImages = [].slice.call(document.querySelectorAll("img.imgLoad"));
    if ("IntersectionObserver" in window) {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
          }
        });
      });
      lazyImages.forEach(img => observer.observe(img));
    }
  })
</script>

</html>